<template>
  <el-container>
    <el-header style="height: 100%">
      <div class="pd-10">
        <el-row :gutter="10">
          <el-col :span="4">
            <a href="#" class="showItemA">
              <div class="showItemText">
                <p>总类别量</p>
                <p>{{ SysCategoryCount }}</p>
              </div>
            </a>
          </el-col>
        </el-row>
      </div>

      <div class="pd-10">
        <el-input style="width: 200px" suffix-icon="el-icon-edit" placeholder="请输入名称"
                  v-model="sysCategoryName"></el-input>
        <el-input class="ml-5" style="width: 200px" suffix-icon="el-icon-message" placeholder="作用域"
                  v-model="sysCategoryScopeAction"></el-input>
        <el-button class="ml-5" icon="el-icon-search" type="primary" @click="load">搜索</el-button>
        <el-button type="warning" icon="el-icon-edit" @click="reset">重置</el-button>
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="openDialog('insert')">新增</el-button>
      </div>
    </el-header>
    <el-main>
      <el-table :data="tableData" border stripe v-loading="loading" heigth="580">
        <el-table-column prop="sysCategoryId" label="编号" width="80">
        </el-table-column>
        <el-table-column prop="sysCategoryScopeAction" sortable label="作用域" width="300">
        </el-table-column>
        <el-table-column prop="sysCategoryName" sortable label="名称">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="getSysCategoryDetail(scope.row.sysCategoryId)" type="text" size="small">编辑</el-button>
            <el-button style="color: #F56C6C" @click="deleteProductCategory(scope.row.sysCategoryId)" type="text"
                       size="small">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--        新增用户弹出框-->
      <el-dialog title="添加商品类型" :visible.sync="InsertDialogFormVisible">
        <el-form :model="form">
          <el-form-item label="系统类型名称" :label-width="formLabelWidth">
            <el-input placeholder="请输入系统类型名称" v-model="form.sysCategoryName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="系统类型作用域" :label-width="formLabelWidth">
            <el-input placeholder="系统类型作用域" v-model="form.sysCategoryScopeAction" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelDialog('insert')">取 消</el-button>
          <el-button type="primary" @click="InsertSysCategory">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="修改系统类型" :visible.sync="UpdateDialogFormVisible">
        <el-form :model="form">
          <el-form-item label="系统类型编号" :label-width="formLabelWidth">
            <el-input :disabled="true" placeholder="系统类型编号" v-model="form.sysCategoryId"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="系统类型名称" :label-width="formLabelWidth">
            <el-input placeholder="系统类型名称" v-model="form.sysCategoryName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="系统类型作用域" :label-width="formLabelWidth">
            <el-input placeholder="系统类型作用域" v-model="form.sysCategoryScopeAction" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelDialog('update')">取 消</el-button>
          <el-button type="primary" @click="UpdateSysCategory">确 定</el-button>
        </div>
      </el-dialog>
    </el-main>
    <el-footer>
      <div class="pd-10">
        <!--          current-page: 当前的页码
                      page-size: 每页的个数
        -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[20 ,40, 80, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-footer>

  </el-container>
</template>

<script>
export default {
  name: "SystemCategory",
  data() {
    return {
      loginStatus: true,
      loading: true,
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      SysCategoryCount: 0,
      sysCategoryName: "",
      sysCategoryScopeAction: "",
      InsertDialogFormVisible: false,
      UpdateDialogFormVisible: false,
      formLabelWidth: '120px',
      form: {
        sysCategoryId: '',
        sysCategoryName: '',
        sysCategoryScopeAction: ''
      },
    }
  },
  created() {
    this.load()
    this.FindSysCategoryCount()
  },
  methods: {
    load() {
      this.loading = true
      this.$axios({
        method: "get",
        url: this.$api.FindSysCategoryPage,
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          sysCategoryName: this.sysCategoryName,
          sysCategoryScopeAction: this.sysCategoryScopeAction
        },
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
        this.loading = false
      })
    },
    //修改每页的条数
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    //修改页码
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    //搜索重置
    reset() {
      this.sysCategoryName = ""
      this.sysCategoryScopeAction = ""
      this.load()
      this.FindSysCategoryCount()
    },
    openDialog(type) {
      if (type == 'insert') {
        this.form = {
          sysCategoryId: '',
          sysCategoryName: '',
          sysCategoryScopeAction: ''
        }
        this.InsertDialogFormVisible = true
      } else if (type == 'update') {
        this.UpdateDialogFormVisible = true
      }
    },
    cancelDialog(type) {
      this.form = {
        sysCategoryId: '',
        sysCategoryName: '',
        sysCategoryScopeAction: ''
      }
      if (type == 'insert') {
        this.InsertDialogFormVisible = false
      } else if (type == 'update') {
        this.UpdateDialogFormVisible = false
      }
    },
    InsertSysCategory() {
      this.$axios({
        url: this.$api.InsertSysCategory,
        method: 'post',
        headers: {'content-type': 'multipart/form-data'},
        data: this.form,
      }).then(res => {
        this.$notify({
          title: '成功',
          message: '类型添加成功',
          type: 'success'
        });
        this.load()
        this.cancelDialog('insert')
      })
    },
    deleteProductCategory(sysCategoryId) {
      this.$confirm('此操作将删除该类型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          method: 'delete',
          url: this.$api.DeleteSysCategory,
          headers: {'content-type': 'multipart/form-data'},
          data: {
            'sysCategoryId': sysCategoryId
          }
        }).then(res => {
          if (res.code == 'true') {
            this.$notify({
              title: '成功',
              message: '系统类型删除成功',
              type: 'success'
            });
            this.load()
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
            this.load()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    UpdateSysCategory() {
      this.$axios({
        url: this.$api.InsertSysCategory,
        method: 'post',
        headers: {'content-type': 'multipart/form-data'},
        data: this.form,
      }).then(res => {
        this.$notify({
          title: '成功',
          message: '类型修改成功',
          type: 'success'
        });
        this.load()
        this.cancelDialog('update')
      })
    },
    getSysCategoryDetail(sysCategoryId) {
      this.$axios({
        url: this.$api.FindSysCategoryDetail,
        method: 'get',
        params: {
          sysCategoryId: sysCategoryId
        }
      }).then(res => {
        this.form = res.data
        this.openDialog('update')
      })
    },
    FindSysCategoryCount() {
      this.$axios({
        url: this.$api.FindSysCategoryCount,
        method: 'get'
      }).then(res => {
        this.SysCategoryCount = res.data
      })
    }

  },
}
</script>

<style scoped>

</style>